<template>
	<view>
		<!-- 勿删! 用于处理 IOS bug ，频繁触发视图渲染解决同层渲染bug -->
		<!-- controls 若为 true 可删 -->
		<view :style="{display:updateView ? 'block' : 'none'}" />

		<swiper class="sv-swiper" :duration="500" :vertical="true" circular @change="swiperChange" :current="currentEx">
			<!-- 此处不能加 key，加key会导致回弹失效。 -->
			<swiper-item v-for="(item,i) in showList" :key="i">
				<view class="sv-item">
					<video :direction="0" :id="'video' + i" class="sv-video" :src="item.url" :controls="false"
						:show-loading="false" :show-mute-btn="false" :loop="true" :autoplay="false"
						:show-fullscreen-btn="false" :show-play-btn="false" :show-center-play-btn="false"
						@click="changeVideoState" />

					<!-- 内容区域 -->
					<block v-if="item.index != -1">
						<operation :itemInfo.sync="item" :swilist.sync="showList" />
						<view class="content-ne">
							<view class="store cross-center" v-if="item.goodslist.vdian_url != ''"
								@click="jump(item.goodslist.vdian_url,item.id)">
								<image :src="item.user.userInfo.avatar" mode=""></image>
								<view class="u-line-1" style="max-width: 520rpx;">
									{{item.user.nickname}} 的珠宝店
								</view>
							</view>
							<view class="commodity" v-if="item.good_ids != null">
								<!-- <scroll-view scroll-x="true">
									<view class="sc-z">
										<view class="item-good dir-left-nowrap" v-for="(it,idx) in item.goodslist"
											v-if="it.length != 0" :key="idx" @click="shopDetail(it,item.id)">
											<view class="image-view cover-pic">
												<image class="img" :src="it.cover_pic"></image>
												<view class="no-goods" v-if="it.goods_stock == 0">
													已售
												</view>
											</view>
											<view class="content dir-top-nowrap main-between">
												<view class="name t-omit-two">{{it.name}}</view>
												<view class="pri-but dir-left-nowrap main-between cross-bottom">
													<view class="pri">
														<text class="price"
															:class="sign === 'gift' ? theme + '-color '+ theme : getTheme + '-m-text '+ getTheme">定金￥{{it.price}}</text>
														<view class="subtitle">去实体店体验</view>
													</view>
													<view class="button" v-if="it.goods_stock == 0">已售</view>
													<view class="button" @click="shopDetail(it,item.id)" v-else>查看详情
													</view>
												</view>
											</view>
										</view>
									</view>
								</scroll-view> -->
								<swiper autoplay class="swiper" interval="3000" circular next-margin="90rpx"
									disable-touch>
									<swiper-item v-for="(it,idx) in item.goodslist.goodlist" v-if="it.length != 0"
										:key="idx" @click="shopDetail(it,item.id)">
										<view class="item-good dir-left-nowrap">
											<view class="image-view cover-pic">
												<image class="img" :src="it.cover_pic"></image>
												<view class="no-goods" v-if="it.goods_stock == 0">
													已售
												</view>
											</view>
											<view class="content dir-top-nowrap main-between">
												<view class="name t-omit-two">{{it.name}}</view>
												<view class="pri-but dir-left-nowrap main-between cross-bottom">
													<view class="pri">
														<text class="price"
															:class="sign === 'gift' ? theme + '-color '+ theme : getTheme + '-m-text '+ getTheme">定金￥{{it.price}}</text>
														<view class="subtitle">去实体店体验</view>
													</view>
													<view class="button" v-if="it.goods_stock == 0">已售</view>
													<view class="button" @click="shopDetail(it,item.id)" v-else>查看详情
													</view>
												</view>
											</view>
										</view>
									</swiper-item>
								</swiper>
							</view>

							<view class="debug" @click="openall" v-if="!openit">
								<view>{{item.catetitle}}</view>
								<view class="u-line-2">{{item.describe}}</view>
								<!-- <view class="lookat" @click="viewfull">
									点击查看全文
								</view> -->
							</view>
							<view class="nodebug" @click="putall" @touchmove.stop.prevent="moveStop" v-else>
								<view>{{item.catetitle}}</view>
								<view @touchstart="touchtext">{{item.describe}}
								</view>
							</view>
						</view>
					</block>

					<image class="sv-play" v-show="!videoState" src="../../../static/image/icon/play.png"
						mode="widthFix" />
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import utils from './utils.js';
	import operation from './components/operation.vue';
	let mallurl = null
	export default {
		components: {
			operation
		},
		data() {
			return {
				baseList: [], // 数据池
				showList: '', // 当前显示的列表
				swiperIndex: 0, // 当前swiper的索引
				videoIndex: 0, // 当前视频播放的索引
				statusbarH: 0, // 状态栏高度
				videoState: true, // 当前视频播放的状态
				defualtVideoId: null, // 默认视频
				currentEx: 0, // 控制回弹字段
				reqLock: false, // 请求锁
				updateView: true, // ios bug
				page: 1,
				limit: 10,
				illheight: 0,
				befheight: 0,
				openit: false,
				keys: new Set(), // 索引，用于去重
				title: '',
				transmit_id: null,
				mall_id: 1
			}
		},
		onLoad: function(option) {
			if (option.transmit_id) {
				this.transmit_id = option.transmit_id
			}
			const res = wx.getSystemInfoSync()
			this.statusbarH = res.statusBarHeight;
			this.openit = false
			// 带参跳转
			if (option.id) {
				this.defualtVideoId = option.id;
			}
			this.mall_id = option.mall_id || 1
			mallurl = this.$siteInfo.apiroot + '?_mall_id=' + this.mall_id + '&r='
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif
		},
		onHide() {
			this.openit = false
		},
		onReady() {
			this.getList();
			this.disposeIosBug();
		},
		computed: {
			...mapState({
				userInfo: state => state.user.info
			}),
		},
		onShareAppMessage() {
			return this.$shareAppMessage({
				title: this.showList[this.currentEx].title != '' ? this.showList[this.currentEx].title : this
					.showList[this.currentEx].describe,
				path: '/plugins/sixty/fullscreen/index',
				params: {
					transmit_id: this.userInfo.options.user_id,
					id: this.showList[this.currentEx].id,
					mall_id: this.mall_id
				}
			});
		},
		onShareTimeline() {
			return this.$shareTimeline({
				title: this.showList[this.currentEx].title != '' ? this.showList[this.currentEx].title : this
					.showList[this.currentEx].describe,
				query: {
					transmit_id: this.userInfo.options.user_id,
					id: this.showList[this.currentEx].id,
					mall_id: this.mall_id
				}
			});
		},
		methods: {
			openall() {
				this.openit = true
				uni.createAnimation()
			},
			putall() {
				this.openit = false
			},
			viewfull() {
				this.openit = !this.openit
			},
			touchtext() {

			},

			shopDetail(item, videoid) {
				if (item.goods_stock != 0) {
					this.$storage.setStorageSync('hivideoid', videoid)
					uni.navigateTo({
						url: '/plugins/mch/goods/goods?id=' + item.id + '&mch_id=' + item.mch_id + '&videoid=' +
							videoid + '&mall_id=' + item.mall_id 
					})
				}
			},
			jump(item, id) {
				this.$storage.setStorageSync('hivideoid', id)
				uni.navigateTo({
					url: item
				})
			},
			// 处理 IOS controls为false情况下 同层渲染bug代码
			disposeIosBug() {
				setInterval(() => {
					this.updateView = false;
					this.$nextTick(() => {
						this.updateView = true;
					});
				}, 100);
			},
			// （防抖）获取数据列表
			getList(id) {
				// 判断是否存在id 不存在true
				let isId = id == undefined;

				let defualtVideoId = this.defualtVideoId
				let reqLock = this.reqLock
				let baseList = this.baseList
				let videoIndex = this.videoIndex

				baseList = isId ? [] : baseList;

				// 存在并且id相同不再重复加载避免异常错误
				if (defualtVideoId && defualtVideoId == id) {
					uni.showToast({
						title: '暂无更多视频',
						icon: 'none'
					});
					return;
				}

				// 请求数据
				let qdata = {
					page: this.page,
					page_size: this.limit,
					id: !isId ? id : defualtVideoId,
					review_status: 1
				}
				if (this.transmit_id != null) {
					qdata.transmit_id = this.transmit_id
				}

				// 是否能请求
				if (reqLock) {
					return;
				}

				this.reqLock = true;

				// 请求接口
				this.$request({
					url: mallurl + this.$apiUrl.sixty.videolist,
					data: qdata,
				}).then((res) => {
					uni.setNavigationBarTitle({
						title: res.data.current.describe
					})
					// console.log(res);
					this.baseList = []
					// id存在表示加载更多视频
					// 不存在id 请求当前赋值
					if (!defualtVideoId) {
						defualtVideoId = this.defualtVideoId = res.data.current.id;
					}

					if (!isId) {
						let arr = id > defualtVideoId ? res.data.lastone : res.data.nextone;
						// 下滑加载
						if (id < defualtVideoId) {
							baseList = baseList.concat(arr);
						}
						// 上滑加载
						else {
							baseList.unshift(...arr.reverse());
							if (this.videoIndex == 0) {
								this.videoIndex = videoIndex + arr.length; // 保持当前索引
							}
						}

					} else {
						baseList = baseList.concat(res.data.lastone);
						baseList.push(res.data.current);
						baseList = baseList.concat(res.data.nextone);
					}

					for (let a = 0; a < baseList.length; a++) {
						for (let b = a + 1; b < baseList.length; b++) {
							if (baseList[a].id == baseList[b].id) {
								baseList.splice(b, 1)
							}
						}
					}
					baseList.sort(function(a, b) {
						a = a.id;
						b = b.id;
						if (a < b) {
							return 1
						} else if (a > b) {
							return -1
						} else {
							return 0
						}
					})

					// 重新赋值索引
					let index = 0;
					baseList.forEach(item => {
						item.index = index++;
						if (isId && item.id == this.defualtVideoId) {
							this.videoIndex = item.index;
						}
					});
					this.baseList = baseList
					// console.log(this.baseList);
					this.setShowList();
				}).catch(err => {
					this.reqLock = false;
					if (err.msg) {
						uni.showToast({
							icon: 'none',
							title: err.msg
						})
					}
					// console.log(err);
				}).finally(() => {
					this.reqLock = false;
				})
			},
			// 滑动改变
			swiperChange(e) {
				this.openit = false
				let newIndex = e.detail.current;
				let oldIndex = this.currentEx;
				this.currentEx = this.swiperIndex = newIndex;
				setTimeout(() => {
					// 判 如果下一个视频没有则进行回弹
					let nowItem = this.showList[newIndex];

					if (nowItem.index != -1) {
						this.videoIndex = nowItem.index;
						this.getList(nowItem.id);
					} else {
						uni.showToast({
							title: '暂无更多视频',
							icon: 'none'
						})
						this.currentEx = oldIndex;
					}
				}, 10)

				this.videoState = true;
			},
			// 对showlist(swiper所展示数据)
			setShowList() {
				let videoIndex = this.videoIndex;
				// 当前 0
				let swiperIndex = this.swiperIndex;
				let list = this.baseList;

				if (!(list && list.length > 0)) return;

				// 获取当前视频索引的上下视频
				let upVideo, nowVideo, nextVideo, noneVideo = {
					index: -1
				};
				// 获取上下视频然后到 顶/底 时则使用nonevideo占位
				upVideo = list[videoIndex - 1] == undefined ? noneVideo : list[videoIndex - 1];
				nowVideo = list[videoIndex];
				nextVideo = list[videoIndex + 1] == undefined ? noneVideo : list[videoIndex + 1];

				// 获取当前swiperIndex的上下索引
				// 上一个
				let upSwiperIndex = swiperIndex - 1 < 0 ? 2 : swiperIndex - 1;
				// 下一个
				let nextSwiperIndex = swiperIndex + 1 >= 3 ? 0 : swiperIndex + 1;
				// 对showlist进行重新赋值
				let showList = [];

				showList[upSwiperIndex] = upVideo;
				showList[swiperIndex] = nowVideo;
				showList[nextSwiperIndex] = nextVideo;
				this.defualtVideoId = nowVideo.id

				// console.log(showList);
				// 点赞
				let like = false
				if (showList[swiperIndex].otherdata.is_likes_video == 0) {
					like = false
				} else if (showList[swiperIndex].otherdata.is_likes_video == 1) {
					like = true
				}
				// 关注
				let follow = false
				if (showList[swiperIndex].otherdata.is_focus_video == 0) {
					follow = false
				} else if (showList[swiperIndex].otherdata.is_focus_video == 1) {
					follow = true
				}
				// 收藏
				let star = false
				if (showList[swiperIndex].otherdata.is_favorite_video == 0) {
					star = false
				} else if (showList[swiperIndex].otherdata.is_favorite_video == 1) {
					star = true
				}
				showList[swiperIndex].like = like
				showList[swiperIndex].follow = follow
				showList[swiperIndex].star = star
				showList[swiperIndex].videoLikesNums = showList[swiperIndex].otherdata.videoLikesNums
				showList[swiperIndex].commentNum = showList[swiperIndex].otherdata.videoCommentsNums
				showList[swiperIndex].videoColsNums = showList[swiperIndex].otherdata.videoFavoriteNums
				showList[swiperIndex].forwardNums = showList[swiperIndex].otherdata.follow_num
				// this.$set(showList[swiperIndex], 'like', like);
				// this.$set(showList[swiperIndex], 'follow', follow);
				// this.$set(showList[swiperIndex], 'star', star);
				// this.$set(showList[swiperIndex], 'videoLikesNums', showList[swiperIndex].otherdata.videoLikesNums);
				// this.$set(showList[swiperIndex], 'commentNum', showList[swiperIndex].otherdata.videoCommentsNums);
				// this.$set(showList[swiperIndex], 'videoColsNums', showList[swiperIndex].otherdata.videoFavoriteNums);
				// this.$set(showList[swiperIndex], 'forwardNums', showList[swiperIndex].otherdata.follow_num);

				this.showList = showList
				// console.log(this.showList);

				// 播放当前选择的视频关闭其他的视频
				this.$nextTick(() => {
					uni.createVideoContext(`video${upSwiperIndex}`, this).stop();
					uni.createVideoContext(`video${nextSwiperIndex}`, this).stop();
					uni.createVideoContext(`video${swiperIndex}`, this).play();
				})

			},
			// 修改当前视频的播放状态
			changeVideoState(e) {
				let video = uni.createVideoContext(e.currentTarget.id, this);
				this.videoState ? video.pause() : video.play();
				this.videoState = !this.videoState;
			},
			// 返回
			back() {
				uni.navigateBack();
			},
			moveStop() {}
		}
	}
</script>

<style>
	page {
		background-color: #000;
	}
</style>

<style lang="scss" scoped>
	.debug {
		/* position: absolute;
		left: 50rpx;
		bottom: 156rpx; */
		font-size: 28rpx;
		color: #fff;
		width: 86%;
		max-height: 150rpx;
		overflow: hidden;
		// padding: 24rpx 0;
		padding: 24rpx 50rpx 150rpx;

		.lookat {
			font-size: 24rpx;
		}
	}

	.nodebug {
		/* position: absolute;
		left: 0;
		bottom: 0; */
		max-height: 760rpx;
		border-radius: 54rpx 54rpx 0 0;
		font-size: 28rpx;
		text-align: justify;
		color: #fff;
		width: 100%;
		// padding: 24rpx 0;
		padding: 24rpx 50rpx 150rpx;
		margin-top: 24rpx;
		background-color: rgba(0, 0, 0, 0.7);
		overflow-y: scroll;
	}

	.store {
		/* position: absolute;
		left: 50rpx;
		bottom: 300rpx;
		width: 300rpx; */
		max-width: 620rpx;
		width: max-content;
		height: 60rpx;
		background-color: rgba(0, 0, 0, 0.7);
		// background-color: #000;
		color: #fff;
		border-radius: #{120upx};
		// padding: #{0 25upx};
		margin: 0 50rpx;

		image {
			border-radius: 50%;
			width: 50rpx;
			height: 50rpx;
		}

		view {
			font-size: 24rpx;
			padding: 0 24rpx;
		}
	}

	.content-ne {
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
	}

	.commodity {
		width: 86%;
		height: 170rpx;
		// background: #FFFFFF;
		color: #353553;
		margin: 20rpx 50rpx 0;

		.sc-z {
			display: inline-flex;
			height: 170rpx;

			.item-good {
				width: 540rpx;
				margin-right: 20rpx;
				background-color: #ffffff;
				border-radius: #{16upx};
				padding: #{0 25upx};
				padding-top: #{25upx};
				overflow: hidden;
				border-top: 1rpx solid #e0e0e0;

				&:first-child {
					border-top: none;
				}

				.image-view {

					position: relative;

					/* >view {
						width: #{150upx};
						height: #{30upx};
						line-height: #{30upx};
						position: absolute;
						bottom: 0;
						font-size: #{18upx};
						color: #ffffff;
						text-align: center;
						background: linear-gradient(to left, #ffcb00, #ff9600);
					} */
				}
			}

			.cover-pic {
				width: #{150upx};
				height: #{150upx};
				position: relative;

				.img {
					width: 120rpx;
					height: 120rpx;
				}

				.no-goods {
					position: absolute;
					top: 0;
					left: 0;
					width: 120rpx;
					height: 120rpx;
					background-color: rgba(0, 0, 0, 0.3);
					margin: 0 auto;
					font-size: 36rpx;
					text-align: center;
					line-height: 120rpx;
					color: #FFFFFF;
					font-weight: bold;
				}
			}

			.content {
				width: calc(100% - #{120upx});
				min-height: #{120upx};
				margin-bottom: #{25upx};
				padding-left: #{25upx};
			}

			.name {
				line-height: #{32upx};
				font-size: #{24upx};
				color: #303030;
				// margin-top: #{8upx};
			}

			.pri-but {

				>.button {
					border-radius: 70rpx;
					font-size: 24rpx;
					font-weight: 100;
					border: 2rpx solid #e59c26;
					padding: 10rpx 20rpx;
				}

				.pri {
					line-height: #{21upx};
					// margin-top: #{9upx};
				}

				.price {
					font-size: #{21upx};
					line-height: 1;
				}

				.original {
					font-size: #{21upx};
					line-height: 1;
					margin-left: #{15upx};
				}

				.subtitle {
					margin: 8rpx 0;
					font-size: 20rpx;
					color: rgba(0, 0, 0, 0.8);
					font-weight: 600;
				}
			}

			.member-price {
				margin-right: #{12upx};
			}
		}

		.swiper {
			height: 170rpx;

			// swiper-item {
			// 	background: #fff;
			// 	border-radius: 16rpx;
			// }

			.item-good {
				width: 540rpx;
				height: 100%;
				margin-right: 20rpx;
				background-color: #ffffff;
				border-radius: #{16upx};
				padding: #{0 25upx};
				padding-top: #{25upx};
				overflow: hidden;
				border-top: 1rpx solid #e0e0e0;

				&:first-child {
					border-top: none;
				}

				.image-view {

					position: relative;

					/* >view {
							width: #{150upx};
							height: #{30upx};
							line-height: #{30upx};
							position: absolute;
							bottom: 0;
							font-size: #{18upx};
							color: #ffffff;
							text-align: center;
							background: linear-gradient(to left, #ffcb00, #ff9600);
						} */
				}
			}

			.cover-pic {
				width: #{150upx};
				height: #{150upx};
				position: relative;

				.img {
					width: 120rpx;
					height: 120rpx;
				}

				.no-goods {
					position: absolute;
					top: 0;
					left: 0;
					width: 120rpx;
					height: 120rpx;
					background-color: rgba(0, 0, 0, 0.3);
					margin: 0 auto;
					font-size: 36rpx;
					text-align: center;
					line-height: 120rpx;
					color: #FFFFFF;
					font-weight: bold;
				}
			}

			.content {
				width: calc(100% - #{120upx});
				min-height: #{120upx};
				margin-bottom: #{25upx};
				padding-left: #{25upx};
			}

			.name {
				line-height: #{32upx};
				font-size: #{24upx};
				color: #303030;
				// margin-top: #{8upx};
			}

			.pri-but {

				>.button {
					border-radius: 70rpx;
					font-size: 24rpx;
					font-weight: 100;
					border: 2rpx solid #e59c26;
					padding: 10rpx 20rpx;
				}

				.pri {
					line-height: #{21upx};
					// margin-top: #{9upx};
				}

				.price {
					font-size: #{21upx};
					line-height: 1;
				}

				.original {
					font-size: #{21upx};
					line-height: 1;
					margin-left: #{15upx};
				}

				.subtitle {
					margin: 8rpx 0;
					font-size: 20rpx;
					color: rgba(0, 0, 0, 0.8);
					font-weight: 600;
				}
			}

			.member-price {
				margin-right: #{12upx};
			}
		}
	}

	.sv-item,
	.sv-swiper,
	.sv-video {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}

	.sv-play {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		opacity: .8;
		pointer-events: none;
		width: 100rpx;
	}

	.navbar {
		position: fixed;
		top: 0;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		z-index: 99;
	}
</style>
